<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, shrink-to-fit=no">
    <title>用户注册</title>
    <style>
        body { background-color: #f8f8f8;  font-family: "微软雅黑 Light";}
        .title{text-align: center;margin: 60px 0 30px 0;}
        table{margin: auto;}
        .register{margin: 20px 120px 20px 42%;padding: 6px 16px;}
        .res{padding: 6px 16px;}
        #promp{text-align: center;color: red;}
    </style>
</head>
<body>
    <div>
        <h2 class="title">新用户注册</h2>
        <table>
            <tr>
                <td>loginName</td>
                <td>：<input class="loginName" type="text" id="loginName"></td>
            </tr>
            <tr>
                <td>password</td>
                <td>：<input class="password" type="password" id="password"></td>
            </tr>
            <tr>
                <td>showName</td>
                <td>：<input class="showName" type="text" id="showName"></td>
            </tr>
        </table>
        <div>
            <input class= "register"  type="button" value="register" onclick="register()">
            <input class="res" type="reset" value="reset" onclick="clearPoint()">
        </div>
        <div id="promp"></div>
    </div>
</body>
<script src="/plugins/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="/js/commons.js" type="text/javascript"></script>
<script type="text/javascript">
    function register() {
        var loginName = $("#loginName").val();
        if(!loginName){
            $("#promp").html("登录名不能为空");
            return;
        }
        if(loginName.length < 4){
            $("#promp").html("登录名长度不能小于4位");
            return;
        }
        if(loginName.length > 40){
            $("#promp").html("登录名长度不能大于40位");
            return;
        }
        var password = $("#password").val();
        if(!password){
            $("#promp").html("密码不能为空");
            return;
        }
        if(password.length < 6){
            $("#promp").html("密码长度不能小于6位");
            return;
        }
        if(password.length > 32){
            $("#promp").html("密码长度不能大于32位");
            return;
        }
        var showName = $("#showName").val();
        if(!showName){
            $("#promp").html("显示名不能为空");
            return;
        }
        if(showName.length > 6){
            $("#promp").html("显示名长度不能大于6位");
            return;
        }
        $("#promp").html("");
        $.ajax({
            type: "POST",
            url: "/auth/register",
            data: {"loginName":loginName,"password":password,"showName":showName},
            success: function (result) {
                if (result.success){
                    window.location.href = "/index.html";
                }
                alert(result.msg);
            },
            dataType: "json"
        });
    }
</script>
</html>